LOGIC BUILDER NAME EDIT FIX Copy

Documentation for Plans

🔧 Logic Builder - Flow Name Editing Fix

Date: October 12, 2025
Status: ✅ FIXED
Severity: HIGH (User Experience)

🐛 The Problem

Flow name editing was broken in the Logic Builder. When clicking the flow name to edit it, the input field would appear but changes wouldn't be saved properly.

🔍 Root Cause

The template was using two-way binding [(ngModel)] with a signal, which doesn't work in Angular:

<!-- ❌ BROKEN: Two-way binding with signal -->
<input
  type="text"
  class="flow-name-input"
  [(ngModel)]="currentFlowName"
  ...
/>

Problem: currentFlowName is defined as a signal:

readonly currentFlowName = signal<string>('Untitled Flow');

Why it breaks: Angular's two-way binding [(ngModel)] expects a regular property, not a signal. Signals have a different API (.set() and () for reading).

✅ The Fix

Changed to use one-way binding with manual signal updates:

<!-- ✅ FIXED: One-way binding + manual signal update -->
<input
  type="text"
  class="flow-name-input"
  [ngModel]="currentFlowName()"
  (ngModelChange)="currentFlowName.set($event)"
  (blur)="finishEditingFlowName()"
  (keydown.enter)="finishEditingFlowName()"
  (keydown.escape)="cancelEditingFlowName()"
  ...
/>

How it works:

[ngModel]="currentFlowName()" - Read the current value from the signal
(ngModelChange)="currentFlowName.set($event)" - Update the signal when the input changes
Other events (blur, enter, escape) still work as before

🧪 How to Test

Open Logic Builder (/singularity/logic-builder)
Click on the flow name (e.g., "Untitled Flow")
Input field appears - Type a new name (e.g., "My Amazing Flow")
Press Enter or click outside the input
Flow name updates ✅
Save flow - Name persists after save
Reload page - Name is still there

Test Keyboard Shortcuts

Enter - Save the new name ✅
Escape - Cancel editing and restore previous name ✅
Tab/Click outside - Save the new name ✅

📊 Impact

Action	Before	After
Click flow name	✅ Input appears	✅ Input appears
Type new name	❌ Doesn't update	✅ Updates in real-time
Press Enter	❌ Name lost	✅ Name saved
Save flow	❌ Old name saved	✅ New name saved

📁 File Changed

libs/singularity-lib/src/lib/components/logic-builder/logic-builder.component.html
- Changed [(ngModel)]="currentFlowName" to one-way binding with signal update

🎓 Lesson Learned

Signals vs Two-Way Binding

When working with Angular signals in templates:

❌ DON'T use two-way binding:

<input [(ngModel)]="mySignal" />  <!-- Won't work! -->

✅ DO use one-way binding + event:

<input 
  [ngModel]="mySignal()" 
  (ngModelChange)="mySignal.set($event)" 
/>

Or use the new signal input syntax (Angular 17+):

// In component
readonly myValue = signal('');

// In template
<input [(ngModel)]="myValue" />  <!-- Works with model() signals -->

🔗 Related Issues

This is a common pattern issue when migrating to signals. Any time you see:

Input fields not updating
Form controls losing values
Two-way binding with signals

Check if you're using [(ngModel)] with a signal instead of a regular property.

Status: ✅ FIXED - READY TO USE

Flow name editing now works correctly with signals! 🎉